<script setup lang="ts">
	import { ref, reactive, watch } from 'vue'
	import {
		onLoad,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	onLoad(() => {
		// uni.showLoading({})
	})
	onReachBottom(() => {
		if (obj.manage == '完成') {
			//操作时禁止分页
			return
		}
		let type;
		//当切换到服务列表时，要给serviceType赋值
		if (obj.current == 6) {
			type = obj.currentService + 1
		} else {
			type = 0
		}
		page.value++
		proxy.$req('GET', proxy.$api.collectList, {
			type: obj.current + 1,
			pageNo: page.value,
			pageSize: 10,
			serviceType: type
		}).then((res) => {
			dataList[`data${obj.current}`] = res.result.records.concat(dataList[`data${obj.current}`])
			dataList[`data${obj.current}`].map((item) => {
				if (obj.current == 1) {
					Object.assign(item, { checked: false, value: item.storeId })
				} else {
					Object.assign(item, { checked: false, value: item.id })
				}
			})
		})
	})
	onUnload(() => {
		uni.hideLoading()
	})
	let delShow = ref(false)
	let page = ref(1)
	let obj = reactive({
		manage: '管理',
		current: 0,
		currentService: 0,
		title: 'checkbox 复选框',
		number: 0,
	})
	let allCheck = ref<boolean>(false)
	let tabList = reactive([{
		name: '商品',
	}, {
		name: '店铺',
	}, {
		name: '论坛'
	}, {
		name: '职位'
	}, {
		name: '营销'
	}, {
		name: '招商'
	}, {
		name: '服务'
	}])

	let serviveTabList = reactive([{
		name: '店铺装修',
	}, {
		name: '美业证书',
	}, {
		name: '店铺转让'
	}, {
		name: '美业课程'
	}])

	let dataList = reactive({
		data0: [
			// {
			// 	img: '../../../static/logo.png',
			// 	title: '韩国高端美容按摩仪热销第一韩国高端美容按摩仪热销第一',
			// 	money: 1324,
			// 	oldMoney: 159,
			// 	value: 'USA',
			// 	checked: false,
			// }, {

			// 	img: '../../../static/logo.png',
			// 	title: '韩国高端美容按摩仪热销第一韩国高端美容按摩仪热销第一',
			// 	money: 1324,
			// 	oldMoney: 159,
			// 	value: 'CHN',
			// 	checked: false,
			// }, {
			// 	img: '../../../static/logo.png',
			// 	title: '韩国高端美容按摩仪热销第一韩国高端美容按摩仪热销第一',
			// 	money: 1324,
			// 	oldMoney: 159,
			// 	value: 'BRA',
			// 	checked: false,
			// }, {
			// 	img: '../../../static/logo.png',
			// 	title: '韩国高端美容按摩仪热销第一韩国高端美容按摩仪热销第一',
			// 	money: 1324,
			// 	oldMoney: 159,
			// 	value: 'JPN',
			// 	checked: false,
			// },
		],
		data1: [
			// {

			// 	value: 'USA',
			// 	img: '../../../static/logo.png',
			// 	title: "大树苗美业店铺",
			// 	imgList: [
			// 		'../../../static/logo.png',
			// 		'../../../static/logo.png',
			// 		'../../../static/logo.png',
			// 		'../../../static/logo.png',
			// 	],
			// 	checked: false,
			// }, {
			// 	value: 'bbb',
			// 	img: '../../../static/logo.png',
			// 	title: "大树苗美业店铺",
			// 	imgList: [
			// 		'../../../static/logo.png',
			// 		'../../../static/logo.png',
			// 		'../../../static/logo.png',
			// 		'../../../static/logo.png',
			// 	],
			// 	checked: false,
			// }
		],
		data2: [
			// {
			// 	value: 'ccc',
			// 	img: '../../../static/logo.png',
			// 	title: '邓川生活分享',
			// 	time: "2020-23-33",
			// 	text: '水电费离开家啊对方离开打扫房间拉胯打扫房间',
			// 	imgMax: '../../../static/images/jianliBg.png',
			// 	checked: false,
			// }, {
			// 	value: 'ddd',
			// 	img: '../../../static/logo.png',
			// 	title: '邓川生活分享',
			// 	time: "2020-23-33",
			// 	text: '水电费离开家啊对方离开打扫房间拉胯打扫房间',
			// 	imgMax: '../../../static/images/jianliBg.png',
			// 	checked: false
			// },
		],
		data3: [],
		data4: [
			// {
			// 	value: 'ccc',
			// 	img: '../../../static/logo.png',
			// 	title: '营销',
			// 	time: "2020-23-33",
			// 	text: '水电费离开家啊对方离开打扫房间拉胯打扫房间',
			// 	imgMax: '../../../static/images/jianliBg.png',
			// 	checked: false,
			// }, {
			// 	value: 'ddd',
			// 	img: '../../../static/logo.png',
			// 	title: '营销',
			// 	time: "2020-23-33",
			// 	text: '水电费离开家啊对方离开打扫房间拉胯打扫房间',
			// 	imgMax: '../../../static/images/jianliBg.png',
			// 	checked: false
			// },
		],
		data5: [
			// {
			// 	value: 'ccc',
			// 	img: '../../../static/logo.png',
			// 	title: '招商',
			// 	time: "2020-23-33",
			// 	text: '水电费离开家啊对方离开打扫房间拉胯打扫房间',
			// 	imgMax: '../../../static/images/jianliBg.png',
			// 	checked: false,
			// }, {
			// 	value: 'ddd',
			// 	img: '../../../static/logo.png',
			// 	title: '招商',
			// 	time: "2020-23-33",
			// 	text: '水电费离开家啊对方离开打扫房间拉胯打扫房间',
			// 	imgMax: '../../../static/images/jianliBg.png',
			// 	checked: false
			// },
		],
		data6: [
			// {
			// 	value: 'ccc',
			// 	img: '../../../static/logo.png',
			// 	title: '服务',
			// 	time: "2020-23-33",
			// 	text: '水电费离开家啊对方离开打扫房间拉胯打扫房间',
			// 	imgMax: '../../../static/images/jianliBg.png',
			// 	checked: false,
			// }, {
			// 	value: 'ddd',
			// 	img: '../../../static/logo.png',
			// 	title: '服务',
			// 	time: "2020-23-33",
			// 	text: '水电费离开家啊对方离开打扫房间拉胯打扫房间',
			// 	imgMax: '../../../static/images/jianliBg.png',
			// 	checked: false
			// },
		],
	})
	const getList = () => {
		let type;
		if (obj.current == 6) {
			type = obj.currentService + 1
		} else {
			type = 0
		}
		proxy.$req('GET', proxy.$api.collectList, {
			type: obj.current + 1,
			pageNo: page.value,
			pageSize: 10,
			serviceType: type
		}).then((res) => {
			dataList[`data${obj.current}`] = res.result.records
			dataList[`data${obj.current}`].map((item) => {
				if (obj.current == 1) {
					Object.assign(item, { checked: false, value: item.storeId })
				} else {
					Object.assign(item, { checked: false, value: item.id })
				}
			})
			console.log(dataList[`data${obj.current}`])
		})
	}
	getList()
	const tabClick = (e) => {
		console.log(e)
		dataList[`data${obj.current}`].forEach((item) => {
			item.checked = false
		})
		obj.current = e.index
		// obj.currentService = 0
		console.log(obj.currentService, "打印currentService")
		page.value = 1
		obj.number = 0
		getList()
		let data = dataList[`data${obj.current}`]
		let i = 0
		if (!data) {
			return
		}
		// data.forEach(item => {
		// 	if (item.checked) {
		// 		i++
		// 	}
		// })
		// obj.number = i
		allCheck.value = false
		// if (i == data.length && data.length != 0) {
		// 	allCheck.value = true
		// } else {
		// 	allCheck.value = false
		// }
	}
	const serviceTabClick = (e) => {
		console.log(obj.currentService)
		dataList[`data${obj.current}`].forEach((item) => {
			item.checked = false
		})
		obj.currentService = e.index
		page.value = 1
		obj.number = 0
		getList()
	}
	const checkboxChange = (e) => {
		console.log(e, "打印e")
		var items = dataList[`data${obj.current}`],
			values = e.detail.value;
		obj.number = values.length
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			const item = items[i]
			if (values.includes(item.value)) {
				item.checked = true
			} else {
				item.checked = false
			}
		}
		console.log(values, "打印e")
		if (values.length == items.length) {
			allCheck.value = true
		} else {
			allCheck.value = false
		}
	}
	//全选
	const checkboxChangeAll = (e) => {
		let data = dataList[`data${obj.current}`]
		allCheck.value = !allCheck.value
		if (allCheck.value) {
			data.forEach(item => {
				item.checked = true
			})
			obj.number = data.length
		} else {
			data.forEach(item => {
				item.checked = false
			})
			obj.number = 0
		}
	}
	watch(allCheck, (newVal, oldVal) => {
		console.log(newVal, oldVal)
	})
	//点击右上角管理
	const editClick = () => {
		if (obj.manage == '管理') {
			obj.manage = '完成'
		} else {
			obj.manage = '管理'
		}
	}
	const deleteMeth = () => {
		//操作选中的item--返回id
		let choseObj = dataList['data' + obj.current].filter(item => item.checked)
		choseObj = choseObj.map(item => item.id)
		console.log(choseObj);
		if (choseObj.length == 0) {
			uni.$u.toast("请选择要取消的藏品")
			return
		}
		delShow.value = true
	}
	const caozuo = () => {
		//操作选中的item--返回id
		let choseObj = dataList['data' + obj.current].filter(item => item.checked)
		choseObj = choseObj.map(item => item.id)
		let type;
		if (obj.current != 6) {
			type = 0
		} else {
			type = obj.currentService + 1
		}
		proxy.$req('delete', proxy.$api.closeCollect, {
			ids: choseObj,
			serviceType: type,
			type: obj.current + 1,
			userId: userStoreInfo.userInfo.id
		}).then((res) => {
			console.log(res)
			if (res.code != 200) {
				uni.$u.toast(res.message)
				return
			}
			page.value = 1
			getList()
			delShow.value = false
		})
	}
	const routerLink = (name, item) => {
		if (obj.manage == '完成') {
			return
		}
		router.push({
			name,
			params: {
				id: item.id
			}
		})
	}
	//商品跳转
	const routerLink0 = (item) => {
		if (obj.manage == '完成') {
			return
		}
		if (item.isType == 0) {
			router.push({
				name: 'goodsDetail',
				params: {
					id: item.id
				}
			})
		} else {
			router.push({
				name: 'rentDetail',
				params: {
					id: item.id
				}
			})
		}
	}
	//店铺专属跳转
	const storeRouter = (item) => {
		if (obj.manage == '完成') {
			return
		}
		let data;
		data = {
			isType: 0,
			meiyeSupplier: {
				id: item.storeId,
				storeName: item.storeName,
				storeDescription: item.storeName
			},
		}
		router.push({
			name: 'goodsBusiness',
			params: {
				data: JSON.stringify(data)
			}
		})
	}
	//服务列表专属跳转
	const routerService = (item) => {
		if (obj.manage == '完成') {
			return
		}
		if (obj.currentService == 2) {
			router.push({
				name: 'serviceMakeover',
				params: {
					id: item.id,
					serviceType: '3'
				}
			})
		} else {
			router.push({
				name: 'serviceRichDetail',
				params: {
					id: item.id,
					type: String(obj.currentService),
					serviceType: String(obj.currentService + 1)
				}
			})
		}
	}
</script>

<template>
	<u-navbar class="navbar" style="z-index: 100;" :placeholder="true" title="" :autoBack="true">
		<template #center>
			<view style="font-weight: 600;font-size: 36rpx;">我的收藏</view>
		</template>
		<template #right>
			<view style="" @click="editClick">{{obj.manage}}</view>
		</template>
	</u-navbar>
	<view class="">
		<u-tabs lineColor="#CB645E" lineWidth="50rpx" :activeStyle="{
		            color: '#CB645E',
		            fontWeight: '600',
					fontSize:'28rpx'
		        }" :inactiveStyle="{
		            color: 'rgba(0,0,0,0.85)',
					fontSize:'28rpx'
		        }" itemStyle="padding:10rpx 25rpx; height: 34px;" :list="tabList" @click="tabClick"></u-tabs>
		<u-tabs v-if="obj.current == 6" :current="obj.currentService" lineColor="#CB645E" lineWidth="80rpx"
			:activeStyle="{
		            color: '#CB645E',
		            fontWeight: '600',
					fontSize:'26rpx'
		        }" :inactiveStyle="{
		            color: 'rgba(0,0,0,0.85)',
					fontSize:'28rpx'
		        }" itemStyle="padding:10rpx 40rpx; height: 34px;" :list="serviveTabList" @click="serviceTabClick"></u-tabs>
		<!-- 商品 -->
		<view v-if="obj.current == 0" class="">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in dataList.data0" :key="item.value">
					<view class="goodModal" @click="routerLink0(item)">
						<view class="check" v-if="obj.manage=='完成'">
							<checkbox style="transform: scale(0.9)" color="#FFFFFF" class="round" :value="item.value"
								:checked="item.checked" />
						</view>
						<view class="goodLeft">
							<image class="img" :src="item.image" mode=""></image>
							<!-- <image class="img" v-if="item.image" :src="JSON.parse(item.image).url" mode=""></image> -->
						</view>
						<view class="goodRight">
							<view class="rightH">
								{{item.name}}
							</view>
							<view class="rightF">
								<text class="yuan">￥</text><text class="num">{{item.price}}</text> <del class="del"
									v-if="item.otPrice">￥{{item.otPrice}}</del>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<!-- 店铺 -->
		<view v-if="obj.current == 1" class="">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in dataList.data1" :key="index">
					<view class="shopModal" @click="storeRouter(item)">
						<view class="check" style="padding: 20rpx 0;box-sizing: border-box;" v-if="obj.manage=='完成'">
							<checkbox color="#FFFFFF" style="transform: scale(0.9)" class="round" :value="item.value"
								:checked="item.checked" />
						</view>
						<view class="shopLeft">
							<image class="img" :src="item.storeImage" mode=""></image>
						</view>
						<view class="shopRight">
							<view class="rightH">
								<view class="title">
									{{item.storeName}}
								</view>
								<view class="btn">
									进店
								</view>
							</view>
							<view class="rightF">
								<view class="" v-for="(item2,index) in item.productList" :key="index">
									<image class="img" :src="item2.image" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<!-- 论坛 -->
		<view v-if="obj.current == 2" class="">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in dataList.data2" :key="index">
					<view class="forum" @click="routerLink('communityDetail',item)">
						<view class="check" v-if="obj.manage=='完成'">
							<checkbox color="#FFFFFF" style="transform: scale(0.9)" class="round" :value="item.value"
								:checked="item.checked" />
						</view>
						<view class="">
							<view class="head">
								<view class="headL">
									<image class="img" :src="item.memberAvatar" mode=""></image>
								</view>
								<view class="headR">
									<view class="title">{{item.memberNickName}}</view>
									<view class="text">{{item.updateTime}}</view>
								</view>
							</view>
							<view class="center" :style="obj.manage == '完成' ? 'width:570rpx' : 'width:622rpx'">
								<u-parse :content="item.content"></u-parse>
							</view>
							<!-- <view class="foot" :style="obj.manage == '完成' ? 'width:570rpx' : 'width:622rpx'">
								<image class="img" :src="item.images" mode=""></image>
							</view> -->
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view v-if="obj.current == 3" class="">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in dataList.data3" :key="index">
					<view class="recruitModules" @click="routerLink('jobDetail',item)">
						<view class="check" v-if="obj.manage=='完成'">
							<checkbox color="#FFFFFF" style="transform: scale(0.9)" class="round" :value="item.value"
								:checked="item.checked" />
						</view>
						<view class="right">
							<view class="companyName">
								{{item.companyName}}
							</view>
							<view class="xinxi">
								<view class="name">{{item.name}}</view>
								<view class="money">{{item.comprehensiveSalary}}</view>
							</view>
							<view class="address">
								{{item.provinceName}} {{item.cityName}} {{item.areaName}}
							</view>
							<view class="message">
								{{item.jobDescription}}
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view v-if="obj.current == 4" class="">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in dataList.data4" :key="index">
					<view class="markCon1" @click="routerLink('marketingDetail',item)">
						<view class="check" v-if="obj.manage=='完成'">
							<checkbox color="#FFFFFF" style="transform: scale(0.9)" class="round" :value="item.value"
								:checked="item.checked" />
						</view>
						<image class="mcLeft" :src="JSON.parse(item.cover_images)[0].url" mode=""></image>
						<view class="mcRight">
							<view class="mcr1 u-line-2">
								{{ item.title }}
							</view>
							<!-- <view class="mcr2">
								<view class="r-flex-center-center">
									<u-icon name="chat" color="#fff" size="40rpx"></u-icon>
								</view>
							</view> -->
							<!-- <view class="mcr3">
								<view class="">
									<u-icon name="thumb-up"></u-icon>
									<text>{{ item.value }}</text>
								</view>
								<view class="">
									<u-icon name="heart"></u-icon>
									<text>{{ item.value }}</text>
								</view>
								<view class="">
									<u-icon name="eye"></u-icon>
									<text>{{ item.value }}</text>
								</view>
							</view> -->
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view v-if="obj.current == 5" class="">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in dataList.data5" :key="index">
					<view class="markCon2" @click="routerLink('investmentDetail',item)">
						<view class="check" v-if="obj.manage=='完成'">
							<checkbox style="transform: scale(0.9)" color="#FFFFFF" class="round" :value="item.value"
								:checked="item.checked" />
						</view>
						<image class="mcLeft" :src="JSON.parse(item.images)[0].url" mode="">
						</image>
						<view class="mcRight">
							<view class="mcr1 u-line-2">
								{{ item.title }}
							</view>
							<view class="mcr2">
								<!-- <image src="" mode="">
							<u-icon name="chat"></u-icon>
						</image> -->
								<!-- <view class="r-flex-center-center" v-if="userStoreInfo.userFlag!=2">
									<u-icon name="chat" color="#fff" size="40rpx"></u-icon>
								</view>
								<view class="r-flex-center-center" v-if="userStoreInfo.userFlag==2">
									<u-icon name="arrow-upward" color="#fff" size="40rpx"></u-icon>
								</view> -->
							</view>
							<!-- <view class="mcr3">
								<view class="">
									<u-icon name="thumb-up"></u-icon>
									<text>{{ item.title }}</text>
								</view>
								<view class="">
									<u-icon name="heart"></u-icon>
									<text>{{ item.title }}</text>
								</view>
								<view class="">
									<u-icon name="eye"></u-icon>
									<text>{{ item.title }}</text>
								</view>
							</view> -->
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view v-if="obj.current == 6" class="">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in dataList.data6" :key="index">
					<view class="markCon2" @click="routerService(item)">
						<view class="check" v-if="obj.manage=='完成'">
							<checkbox style="transform: scale(0.9)" color="#FFFFFF" class="round" :value="item.value"
								:checked="item.checked" />
						</view>
						<image class="mcLeft" :src="JSON.parse(item.images)[0].url" mode="">
						</image>
						<view class="mcRight">
							<view class="mcr1 u-line-2">
								{{ item.title }}
							</view>
							<view class="mcr2">
								<!-- <image src="" mode="">
							<u-icon name="chat"></u-icon>  
						</image> -->
								<!-- <view class="r-flex-center-center" v-if="userStoreInfo.userFlag!=2">
									<u-icon name="chat" color="#fff" size="40rpx"></u-icon>
								</view>
								<view class="r-flex-center-center" v-if="userStoreInfo.userFlag==2">
									<u-icon name="arrow-upward" color="#fff" size="40rpx"></u-icon>
								</view> -->
							</view>
							<!-- <view class="mcr3">
								<view class="">
									<u-icon name="thumb-up"></u-icon>
									<text>{{ item.title }}</text>
								</view>
								<view class="">
									<u-icon name="heart"></u-icon>
									<text>{{ item.title }}</text>
								</view>
								<view class="">
									<u-icon name="eye"></u-icon>
									<text>{{ item.title }}</text>
								</view>
							</view> -->
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
	</view>
	<view class="" style="height: 200rpx;">

	</view>
	<view class="position" v-if="obj.manage=='完成'">
		<view class="">
			<checkbox-group @change="checkboxChangeAll">
				<label class="uni-list-cell uni-list-cell-pd">
					<checkbox name="check" style="transform: scale(0.9)" class="round" color="#FFFFFF"
						:checked="allCheck" />
					全选
				</label>
			</checkbox-group>
		</view>
		<view class="right" @click="deleteMeth">
			取消收藏 ({{obj.number}})
		</view>
	</view>
	<u-modal :showConfirmButton="false" width="540rpx" :show="delShow" title="提示">
		<view class="modalDel">
			<view class="del">
				确定要删除吗？
			</view>
			<view class='delFoot'>
				<button class="btn1" @click="delShow = false">取消</button>
				<button class="btn2" @click="caozuo()">确定</button>
			</view>
		</view>

	</u-modal>
</template>


<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	// ::v-deep .uni-checkbox-input{
	// 	background-color: #CB645E;
	// }
	:deep(.uni-checkbox-input svg) {
		background-color: #CB645E !important;
		padding: 10rpx;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}

	.modalDel {
		.del {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		.delFoot {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.btn1 {
				width: 206rpx;
				height: 88rpx;
				background: rgba(255, 255, 255, 0);
				border: 2rpx solid #CB645E;
				color: #CB645E;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}

			.btn2 {
				width: 206rpx;
				height: 88rpx;
				background: #CB645E;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}
		}
	}

	.recruitModules {
		width: 686rpx;
		// height: 264rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		display: flex;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		margin: auto;

		.right>view {
			margin-bottom: 10rpx;
		}

		.right {
			margin-left: 20rpx;

			.companyName {
				font-size: 20rpx;
			}

			.xinxi {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;

				.name {
					font-weight: 600;
				}

				.money {}

			}

			.address {
				font-size: 20rpx;
				margin-bottom: 20rpx;
			}

			.message {
				font-size: 22rpx;
			}
		}
	}

	.position {
		padding: 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;

		.right {
			width: 226rpx;
			height: 64rpx;
			background: rgba(255, 255, 255, 0);
			border-radius: 12rpx;
			border: 2rpx solid #CB645E;
			font-size: 28rpx;
			font-weight: 400;
			color: #CB645E;
			text-align: center;
			padding: 13rpx;
			box-sizing: border-box;
		}
	}

	.forum {
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		width: 686rpx;
		// height: 626rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 30rpx auto;

		.head {
			display: flex;

			.headL {
				margin-right: 20rpx;

				.img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.headR {
				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}

				.text {
					margin-top: 10rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}
			}

		}

		.center {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.85);
			margin: 20rpx 0 25rpx 0;
		}

		.foot {
			width: 622rpx;
			height: 342rpx;
			margin: 20rpx auto;

			.img {
				width: 100%;
				height: 342rpx;
				border-radius: 20rpx;
			}
		}

		.foot2 {
			width: 578rpx;
			height: 318rpx;
		}
	}

	.shopModal {
		width: 686rpx;
		height: 256rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		box-sizing: border-box;

		.shopLeft {
			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.shopRight {
			width: 500rpx;

			.rightH {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.btn {
					width: 88rpx;
					height: 48rpx;
					background: rgba(255, 255, 255, 0);
					border: 1rpx solid #CB645E;
					color: #CB645E;
					text-align: center;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 50rpx;
				}

				.title {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.rightF {
				display: flex;
				justify-content: space-between;

				.img {
					width: 116rpx;
					height: 116rpx;
				}
			}
		}
	}

	.goodModal {
		position: relative;
		width: 686rpx;
		height: 244rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 30rpx auto;
		display: flex;
		// justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;

		.check {
			margin-right: 10rpx;
			padding: 60rpx 0;
			box-sizing: border-box;
		}

		.goodLeft {
			margin-right: 20rpx;

			.img {
				width: 176rpx;
				height: 176rpx;
			}
		}

		.goodRight {
			.rightF {
				position: absolute;
				bottom: 30rpx;

				.yuan {
					color: #F22F19;
				}

				.num {
					font-size: 35rpx;
					font-weight: bold;
					color: #F22F19;
				}

				.del {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}
	}

	.markCon1 {
		box-sizing: border-box;
		width: 686rpx;
		// height: 216rpx;
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.mcLeft {
			width: 176rpx;
			height: 200rpx;
			border-radius: 6rpx;
			margin-right: 20rpx;
		}

		.mcRight {
			width: 430rpx;
			height: 200rpx;
			position: relative;

			.mcr1 {
				margin-top: 20rpx;
				width: 100%;
				height: 70rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}

			// .mcr2 {
			// 	display: flex;
			// 	justify-content: flex-end;
			// 	height: 50rpx;
			// 	margin: 15rpx 0;
			// 	view {
			// 		width: 100rpx;
			// 		height: 48rpx;
			// 		background-color: #CB645E;
			// 		border-radius: 6rpx;
			// 		justify-content: center;
			// 	}
			// }

			.mcr3 {
				position: absolute;
				bottom: 0rpx;
				width: 100%;
				// height: 60rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				view {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
	}

	.markCon2 {
		width: 686rpx;
		height: 264rpx;
		background: #FFFFFF;
		background-color: #fff;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 25rpx;
		box-sizing: border-box;

		.mcLeft {
			width: 176rpx;
			height: 200rpx;
			border-radius: 6rpx;
			margin-right: 25rpx;
		}

		.mcRight {
			width: 430rpx;
			height: 200rpx;

			.mcr1 {
				width: 100%;
				height: 70rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}

			.mcr2 {
				display: flex;
				justify-content: flex-end;
				height: 50rpx;
				margin: 15rpx 0;

				// image {
				// 	width: 100rpx;
				// 	height: 48rpx;
				// 	background-color: #CB645E;
				// 	border-radius: 6rpx;
				// }
				view {
					width: 100rpx;
					height: 48rpx;
					background-color: #CB645E;
					border-radius: 6rpx;
					justify-content: center;
				}
			}

			.mcr3 {
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				view {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
	}
</style>